<template>
  <div class="c-w100 c-ph48 c-pt120 c-flex-center">
    <h2 class="c-fc-sblack c-textAlign-c c-fs36">登录</h2>
    <div class="c-ww300 c-hh300 c-m-0auto c-mt20 c-p">
      <img :src="$addXossFilter(qrImg)" class="c-ww300 c-hh300" v-if="qrImg"/>
      <div class="c-bg-white c-opacity80 c-ww300 c-hh300 c-pa c-p-t0 c-p-l0 c-flex-column c-aligni-center c-justify-sa" v-if="isEnd">
        <div class="c-fc-xblack c-fs24 c-fw500">二维码失效</div>
        <div class="c-fc-white c-bg-blue c-fs24 c-pv20 c-ph40 c-br40" @click="getQrCode">刷新</div>
      </div>
    </div>
    <h2 class="c-fc-gray c-fs24 c-textAlign-c c-mt20">请在两分钟内使用微信扫码登录</h2>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common.js"
export default {
  name: 'QrLogin',
  components: {},
  beforeCreate() {},
  data() {
    return {
      qrImg: '',
      sessionCode: '',
      interval: null,
      num: 0,
      isEnd: false,
    }
  },
  created() {
    setDocumentTitle("扫码登录");// eslint-disable-line
  },
  mounted() {
    clearInterval(this.interval);
    this.interval = null;
    this.getQrCode();
  },
  computed: {},
  watch: {},
  methods: {
    getQrCode: function () {
      let cId = utilJs.getCompanyIdByHerf();
      utilJs.postMethod(
        global.apiurl + "pc/login/getQrCode", {cId: cId},
        res => {
          this.$nextTick(function () {
            this.qrImg = res.qrcode;
            this.sessionCode = res.sess;
            this.isEnd = false;
            this.num = 0;
            this.checkLogin();
          });
        },
        fres => {
          this.$showCjToast({
            text: "获取登录二维码失败",
            type: "warn",
          });
        }
      );
    },
    //轮询获取用户扫码信息
    checkLogin: function () {
      this.interval = setInterval(() => {
        this.num += 2;
        if (this.num > 120) {
          clearInterval(this.interval);
          this.interval = null;
          this.isEnd = true;
          this.num = 0;
        } else {
          let cId = utilJs.getCompanyIdByHerf();
          utilJs.postMethod(
            global.apiurl + "pc/login/hasQrcodeLogined", {sess: this.sessionCode, cId: cId},
            res => {
              if (res.t != "" && res.u != "" && res.c != null) {
                clearInterval(this.interval);
                this.interval = null;
                let pcFromPath = localStorage.getItem("pcFromPath") ? localStorage.getItem("pcFromPath") : '/';
                if (pcFromPath.indexOf("homePage/login/qrLogin") > -1) {
                  pcFromPath = "/";
                }
                window.localStorage.removeItem("pcFromPath");
                window.localStorage.setItem("companyId", res.c);
                window.localStorage.setItem(res.c, res.c);
                window.localStorage.setItem("userId", res.u);
                window.localStorage.setItem("token", res.t);
                window.localStorage.setItem(localStorage.getItem("companyId") + "|token", res.t);
                setTimeout(() => {
                  window.location.reload();
                }, 300)
                this.$routerGo(this, "replace", { path: pcFromPath });
              }
            },
            fres => {
              this.$showCjToast({
                text: "获取登录二维码失败",
                type: "warn",
              });
            }
          );
        }
      }, 2000);
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
